import React,{useState} from "react";
import { NewItemForm } from "./NewItemForm";
import { AddItemButton } from './styles';

interface AddNewItemProps {
    onAdd(text:string) :void
    toggleButtonText:string
    dark?: boolean | undefined
}

export const AddNewItem = (props: AddNewItemProps) => {
    const [showForm, setShowForm] = useState(false);
    const {onAdd, toggleButtonText, dark} = props;

    if (showForm) {
        return (
            <NewItemForm 
            onAdd={text => {
                onAdd(text)
                setShowForm(false)
            }} />
        )
    }

    return (
        <AddItemButton dark={dark} onClick={() => setShowForm(true)}>
            {toggleButtonText}
        </AddItemButton>
    )
}